<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="UTF-8">
    <title>添加随缘卡</title>
    <style>
        input{
            background:none;
            outline:none;
            border:0px;
        }
        select{
            background:none;
            outline:none;
            border:0px;
            display: block;
        }
    </style>
    <link rel="stylesheet" href="./css/sy_card.css">
</head>
<body>
    <div class="header">
         编写随缘卡
         <img src="./img/new_style_go_back.png" class="goback_img go_back" id="go_back"/>
    </div>
    <!--input main s-->
    <div class="main_card">

        <div class="main_card_header">
                随缘卡
        </div>
        <!--main_card_user s-->
        <div class="main_card_user">
                <img src="../img/bg_all.png" class="user_img" id="card_bg_all">
                <div class="wrapper_user_mess" id="start_wrapper_sign">
                    <div class="start_wrapper">
                        <img src="./img/start_fs.png" alt="" class="start_s" data-flag="false" data-num="1"><!--
                        --><img src="./img/start_fs.png" alt="" class="start_s" data-flag="false" data-num="2"><!--
                        --><img src="./img/start_fs.png" alt="" class="start_s" data-flag="false" data-num="3"><!--
                        --><img src="./img/start_fs.png" alt="" class="start_s" data-flag="false" data-num="4"><!--
                        --><img src="./img/start_fs.png" alt="" class="start_s" data-flag="false" data-num="5">
                    </div>
                    <div class="user_id">
                        ID:<span id="ident"></span>
                    </div>
                </div>
        </div>
        <!--main_card_user s、e-->

        <!--add voice s-->
        <div class="add_voice_wrapper">
            <div class="add_voice" id="add_voice_id">
                添加语音
            </div>
           <img src="./img/music_player_icon.png" class="img_voice">
        </div>

        <!--add voice e-->
        <!--add img s-->
        <div class="add_img">
            <div class="add_img_text">添加图片</div>
            <img src=" " style="display: none;width:100%;height: 100%;" id="show_img">
        </div>

        <!--add img e-->
        <div class="add_mess_table">
             <div class="add_mess_table_header">
                    华南师范大学（石牌校区）
             </div>
            <div class="add_mess_mid">
                <div class="ad_mess_mid_box" style="display: block;" placeholder=" 笔名" id="penname"></div>
                <div class="ad_mess_mid_box" placeholder="性别" style="text-align: center" id="sex">
                    <!--<option value ="volvo" selected>男</option>-->
                    <!--<option value ="saab">女</option>-->
                </div>
                <div class="ad_mess_mid_box" placeholder="星座" style="text-align: center" id="xinz">

                </div>

            </div>
            <div style="display: block;width: 99%;padding:0;margin: 0;border:0;resize: none;height: 16vw;border-radius:2vw;outline:none;" id="address_aaa"></div>
        </div>
        <!--bottom-->

        <div class="bottom_btn" style="position: relative;">
            <img src="./img/bg_all.png" style="position: absolute;top:50%;left:-17vw;transform:translateY(-50%);display: block;width: 14vw;height:12vw;" id="show_card_img_wrapper">
            <div class="bottom_btn_s" id="bottom_btn_s_f">
                选择信封
            </div>
            <div class="bottom_btn_s" id="send_mess">
                发送
            </div>
        </div>
    </div>
    <!--inputmain e-->
<!--input img s-->
    <input type="file" id="input_img" style="display: none">
<!--input img e-->
    <!--cover card s-->
    <div class="cover_card">
        <div class="cover_card_c">
            <div class="cover_card_c_nav">
                <div class="cover_card_c_nav_s act_nav_c" data-id="1">
                    LV1
                </div>
                <div class="cover_card_c_nav_s" data-id="2">
                    LV2
                </div>
                <div class="cover_card_c_nav_s" data-id="3">
                    LV3
                </div>
                <div class="cover_card_c_nav_s" data-id="4">
                    LV4
                </div>
                <div class="cover_card_c_nav_s" data-id="5">
                    LV5
                </div>
            </div>
            <div class="cover_card_main">

            </div>
        </div>
    </div>
    <!--cover card e-->
</body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="js/common.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/wx_func.js"></script>
<script>
    var img_list = ["./img/start_fs_show.png","./img/start_fs.png"];
    var start_wrapper = document.getElementById("start_wrapper_sign");
    var start_s  = document.getElementsByClassName("start_s");
    var xinz  =document.getElementById("xinz");
    var add_img_text = document.getElementsByClassName("add_img_text")[0];
    var xz_list =["白羊",'金牛',"双子","巨蟹","狮子座","处女座","天秤座","天蝎座","射手座","摩羯座","水瓶座","双鱼座"]
    var show_img = document.getElementById("show_img");
    var input_img = document.getElementById("input_img");
    var add_voice_id = document.getElementById("add_voice_id");
    var voice_id;//wx录音返回的id
    var cover_card = document.getElementsByClassName("cover_card")[0];
    var cover_card_c = document.getElementsByClassName("cover_card_c")[0];
    var cover_card_c_nav = document.getElementsByClassName("cover_card_c_nav")[0];
    var cover_card_c_nav_s = document.getElementsByClassName("cover_card_c_nav_s");
    var cover_card_main = document.getElementsByClassName("cover_card_main")[0];
    var bottom_btn_s_f= document.getElementById("bottom_btn_s_f");
    var go_back = document.getElementById("go_back")
    //获取用户id
    var user_id = location.search.split("user_id=")[1];
    sessionStorage.setItem("user_id", user_id);

    var add_mess_table_header = document.getElementsByClassName("add_mess_table_header")[0];
    var sex = document.getElementById("sex");
    var penname = document.getElementById("penname");
    var address_aaa = document.getElementById("address_aaa");
    var ident = document.getElementById("ident")
    var user_img =document.getElementsByClassName("user_image")[0];
    var starNum = 0;//循环中的start 数量

    var send_mess = document.getElementById("send_mess");

    var card_bg_all = document.getElementById("card_bg_all");

    var sel_card_id ="";//选择的卡片id
    var show_card_img_wrapper  = document.getElementById("show_card_img_wrapper");
    var g_grade=1;//等级

    //录音记录
    var record_voice = "";
    //get_user_by_id
    // /api/user/getUserById
    //get mess

    go_back.addEventListener("click",function () {
        window.location.href="./new_html.html?user_id="+user_id;
    });

    //重写alert
    rewrite_alert();
    axios.get('/yizhiweimen/api/user/getUserById?id=' + user_id)
        .then(function (response) {
            add_mess_table_header.innerText = response.data.school.schoolName;
            sex.innerText = response.data.sex;
            xinz.innerText = response.data.constellation;
            penname.innerText = response.data.penName;
            address_aaa.innerText = response.data.address;
            starNum = response.data.starNum;
            ident.innerText = response.data.ident;

            if(response.data.image ==""||response.data.image == null || response.data.image==undefined){
                //user_img.src =  "./image/bg_all.png";
                card_bg_all.src="./image/bg_all.png";//卡片中的用户img
            }else{
                //user_img.src =  response.data.image;
                card_bg_all.src =  response.data.image;//卡片中的用户img
            }

            start_list();//修改星星数量
        })
        .catch(function (error) {
            console.log(error);
        });

    //添加 图片绑定事件
    add_img({
        input:input_img,
        show:show_img,
        hide:add_img_text
    })

    //微信配置
    get_wx_config();

    //添加 星座
//    for(var x = 0; x < xz_list.length ;x++){
//        var option = document.createElement("option");
//        option.innerText = xz_list[x];
//        xinz.appendChild(option)
//    }

    function preload_more() {
        pre_load_length = img_list.length;
        for(var x= 0; x < pre_load_length; x++){
            preload(img_list[x].image);//单个 preload
        }
    }
    //单个 preload
    function preload(src) {
        img = new Image();
        img.onload = function () {
            pre_load_list.push(img);
            flag_preload += 1;
        };
    }

    //星星点击事件
//    start_wrapper.addEventListener("click",function (e) {
//        if(~e.target.className.indexOf("start_s")){
//            start_list(e.target.dataset.num)
//        }
//    })
    //star for list  to show
    function start_list() {
//        for(var x = 0; x < start_s.length; x++){
//            start_s[x].src=img_list[1];
//        }
        for(var x = 0; x <starNum; x++){
            start_s[x].src = img_list[0];
        }
    }

    //添加图片
    add_img_text.addEventListener("click",function () {
        input_img.click();
    });
    
    //添加语音 and 播放语音
    add_voice_id.addEventListener("click",function (e) {
        if(e.target.innerText === "播放录音"){//录过音
            mui.plusReady(function(){
                common.app_play_voice(record_voice);
            })
        }else{
            //录音
            mui.plusReady(function(){
                //录音
                var _e = e;
                record_voice = common.app_recoed(function () {
                    _e.target.innerText = "播放录音"
                    common.up_load(record_voice,function () {
                        alert("请求失败")
                    })
                });
            })
        }
    });

    //card nav click
    cover_card_c_nav.addEventListener("click",function (e) {
        e.stopPropagation();
        if(~e.target.className.indexOf("cover_card_c_nav_s")){
           var act_nav_c = document.getElementsByClassName("act_nav_c")[0];
            act_nav_c.className = act_nav_c.className.replace(" act_nav_c","");
            e.target.className += " act_nav_c";
            get_img_data(e.target.dataset.id);
        }
    })
    
    //bottom_btn_s_f
    bottom_btn_s_f.addEventListener("click",function () {
        cover_card.style.display="block";
        get_img_data(g_grade);
    })

    //cover_card
    cover_card.addEventListener("click",function (e) {
        cover_card.style.display="none";
    });
    //cover_card_main 阻止事件冒泡
    cover_card_main.addEventListener("click",function (e) {
        e.stopPropagation();
        if(~e.target.nodeName.indexOf("IMG")){
            sel_card_id = e.target.dataset.id;
            show_card_img_wrapper.src = e.target.src;
            cover_card.style.display = "none";
        }
    })

    //添加冒险卡
    send_mess.addEventListener("click",function () {
        //    /api/user/withTheWindIn/addRevelcards
        //上传文件 返回 地址 哦里给 s
        var input_file = new FormData();
        var img_data ="";//返回的图片url；
        var voice_data="";//语音data

        if(input_img.files[0] == undefined){
            alert("请选择图片")
        }

        //上传图片
        input_file.append("files",input_img.files[0]);
        axios.post('/yizhiweimen/api/user/activity/upload',input_file)
             .then(function (e) {
                //alert(e.data)
                 console.log(e.data);
                 img_data = e.data;
                 var ajax_data = "";

                 //上传 卡片信息
                 ajax_data ="user.id="+user_id+"&files="+img_data.fileUrl+","+voice_data+"&envelope.id="+sel_card_id;

                 axios.post('/yizhiweimen/api/user/withTheWindIn/addRevelcards',ajax_data,
                     {headers: {
                         'Content-Type': 'application/json;charset=UTF-8'
                     }}
                 )
                      .then(function (e) {
                         alert(e.data)
                      })
                      .catch(function (e) {})
             })
             .catch(function (e) {});
            //没有空
    })
    

    function  get_img_data(grade) {
//      /api/user/withTheWindIn/selectEnvelope
//      name=xxx&id=22&sxx=33
        g_grade = grade;
        var data = "uid="+user_id+"&"+"grade="+grade;
        var temp = "";
        axios.post('/yizhiweimen/api/user/withTheWindIn/selectEnvelope',data)
            .then(function (e) {
                if(!Array.isArray(e.data.envelopes)){
                    alert(e.data.envelopes);
                    cover_card_main.innerHTML= "";
                    return
                }
                for(var x= 0 ;x<e.data.envelopes.length;x++){
                    temp += '<img src="https://wx.yizhiweimeng.com/yizhiweimen/image/' + e.data.envelopes[x].image + '" data-id="'+e.data.envelopes[x].id+'"/>';
                }
                cover_card_main.innerHTML = temp;
            })
            .catch(function (e) {
                console.log(e.data);
            })
    }


</script>
</html>